<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>分页界面</title>
    <link rel="stylesheet" type="text/css" href="${s.base}/lib/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="${s.base}/css/base/index.css"/>
    <link rel="stylesheet" type="text/css" href="${s.base}/css/base/theme/theme.css"/>
</head>
<body>
<div class="wrap-container clearfix">
    <div class="column-content-detail">
        <form class="layui-form">
            <div class="search-cont clearfix" id="tool">
                <div class="operation-btn-cont">
                    <div class="operright cyt-retract-close hideMenu"> 收起筛选<i class="iconfont">&#xe658;</i></div>
                    <div class="operright cyt-retract-open showMenu" style="display: none;"> 展开筛选<i class="iconfont">&#xe936;</i></div>
                    <button class="layui-btn layui-btn-normal layui-btn-mid" type="button" id="addBtn"><i class="iconfont marr5">&#xe65e;</i>新建</button>
                    <div class="triangle-bottom"></div>
                    <div class="triangle-top"></div>
                </div>
                <div class="search-details">
                    <div class="layui-form-item marb5">
                        <!--search开始-->
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width:80px!important;">社团名称：</label>
                            <div class="layui-input-inline">
                                <input type="text" id="title" name="title" placeholder="请输入社团名称" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label" style="width:80px!important;">指导老师：</label>
                            <div class="layui-input-inline">
                                <input type="text" id="userName" name="userName" placeholder="请输入指导老师" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <!--search结束-->
                        <div class="layui-inline marl8">
                            <button class="layui-btn layui-btn-normal" type="button" id="searchBtn">搜索</button>
                            <button class="layui-btn layui-btn-normal" type="button" id="resetBtn">重置</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <div class="society-list clearfix" id="content">
        </div>
        <div id="page">
        </div>
    </div>
</div>
<!--操作-->
<script src="${s.base}/lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="${s.base}/js/common.js" type="text/javascript" charset="utf-8"></script>
<script>

    var applyId='${applyId}';
    var page = null;
    var baseutil = null;
    var dialog = null;
    var form = null;
    var curr = 1;// 当前页，初始值设为 1
    var limit = 10;// 每页条数，初始值设为 10
    var total;// 总记录数
    layui.use(['jquery', 'table', 'page', 'dialog'], function () {
        var $ = layui.jquery,
            page = layui.page,
            table = layui.table,
            dialog = layui.dialog;

        $(document).ready(function () {
            getInfo();// 获取数据
            toPage();// 进行分页

        });

        function getInfo() {
            var title = $("#title").val();
            var userName = $("#userName").val();
            $.ajax({
                type: "post",
                url: "/work/association/wxassociation/page",
                async: false,// 设置同步请求，加载数据前锁定浏览器
                dataType: 'json',
                data: {
                    "page": curr, // 查询页码
                    "limit": limit, // 每页条数
                    "title":title,
                    "userName":userName,
                    "applyId":applyId

                },
                success: successFu
            });
        }

        // 数据请求成功
        function successFu(pager) {
            //console.log(data);
            // 1.清空原数据
            $("#content").html("");
            // 2.重新赋值页码、条数、总记录数

            // limit = pager.limit;
            total = pager.count;
            // 3.渲染数据
            // 当前查询无数据时
            if (pager.total == 0) {
                // $("tbody").html("<tr><td colspan='7' class='text-center'>暂无数据</td></tr>");
                return;
            }
            /*if (pager.hasNextPage) {
             curr = curr + 1;
             }*/
            var text = '<ul>';
            $.each(pager.data, function (i, item) {
                var  textStr = '指导老师: '+item.userName;
                var  pathString = '/sysFile/showFileByPath?path=' + item.path;
                text+='<li>'+
                '<div class="top-btn" style="display:none;">'+
                '<div class="top-btn-list">'+
                '<button type="button" class="quest-status-blue detail-association" data-id="'+item.id+'" >详情</button>'+
                '<button type="button" class="quest-status-yellow edit-association" data-id="'+item.id+'">编辑</button>'+
                '<button type="button" class="menu-bg-red delect-association" data-id="'+item.id+'">删除</button>'+
                '</div>'+
                '</div>'+
                '<div class="toppic" style="background: url('+pathString+') top center no-repeat;background-size: cover;"></div>'+
                '<h1 class="ellipsis">'+item.title+'</h1>'+
                '<h2 class="ellipsis2">'+textStr+'</h2>'+
                '</li>';
            });
            text +='</ul>';
            $("#content").html(text);

            $(function(){
                $(".society-list ul li").mouseover(function(){
                    $(".society-list ul li").find(".top-btn").hide();
                    $(this).find(".top-btn").show();
                })
                $(".society-list ul li").mouseout(function(){
                    $(".society-list ul li").find(".top-btn").hide();
                    //$(this).find(".top-btn").hide();
                })
            })
}
        //新增社团
        $('#addBtn').bind('click', function () {
            page.editPopup('/work/association/wxassociation/getEdit?applyId='+applyId, '添加');
        });

        // 编辑社团
        $('#content').on('click','.edit-association', function () {
            var id = $(this).attr("data-id");
            page.editPopup('/work/association/wxassociation/getEdit?applyId='+applyId+'&id=' + id, '编辑');
        });

        //详情
        $('#content').on('click','.detail-association', function () {
            var id = $(this).attr("data-id");
            page.editPopup('/work/association/wxassociation/getDetail?applyId='+applyId+'&id=' + id, '详情');
        });

        $('#content').on('click','.delect-association', function () {
            page.delete('/work/association/wxassociation/remove', {"id": $(this).attr("data-id")}, "您确定要删除吗？", function () {
                getInfo();// 获取数据
                toPage();// 进行分页
            });
        });

        // 查询
        $('#searchBtn').bind('click', function () {
            getInfo();// 获取数据
            toPage();// 进行分页
        });
        // 重置
        $('#resetBtn').bind('click', function () {
            $("#title").val("");
            $("#userName").val("");
            getInfo();// 获取数据
            toPage();// 进行分页
        });



        // 进行分页
        function toPage() {
            // 调用分页
            layui.use('laypage', function () {
                var laypage = layui.laypage;
                // 调用分页
                laypage.render({
                    // 分页容器的id
                    elem: 'page',// *必选参数
                    // 数据总数，从服务端得到
                    count: total,// *必选参数
                    // 每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。
                    //limit:limit,
                    // 起始页
                    //curr:Pager,
                    // 连续出现的页码个数
                    //groups:5,
                    // 自定义每页条数的选择项
                    limits: [10, 25, 50, 100],
                    // 自定义首页、尾页、上一页、下一页文本
                    first: '首页',
                    last: '尾页',
                    prev: '<em><<</em>',
                    next: '<em>>></em>',
                    // 自定义主题
                    theme: "#FF5722",
                    // 自定义排版
                    layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                    // 渲染数据
                    jump: function (data, first) {
                        // data包含了当前分页的所有参数
                        curr = data.curr;
                        limit = data.limit;

                        // 首次不执行
                        if (!first) {
                            getInfo();
                        }
                    }
                });
            })
        }

    });


</script>
</body>
</html>